<template>
  <div class="container">
    <!-- 扫描线效果层 -->
    <div class="scanline"></div>
    
    <div class="right"> 
    <!-- 添加搜索区域 -->
      <el-card class="search-card">
          <div class="card-glow"></div>
          <el-form :inline="true" :model="searchForm">
              <el-form-item label="名称">
                  <el-input v-model="searchForm.name" placeholder="请输入名称" clearable />
              </el-form-item>
              <el-form-item label="平台">
                  <el-select v-model="searchForm.platform" placeholder="请选择平台" clearable style="width: 150px;">
                      <el-option label="全部" value="all"></el-option>
                      <el-option label="快手" value="kuaishou"></el-option>
                      <el-option label="抖音" value="douyin"></el-option>
                      <el-option label="小红书" value="xiaohongshu"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="时间范围">
                  <el-date-picker v-model="searchForm.timeRange" type="daterange" range-separator="至"
                      start-placeholder="开始日期" end-placeholder="结束日期" />
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                  <el-button @click="resetSearch">重置</el-button>
              </el-form-item>
          </el-form>
      </el-card>

      <!-- 表格工具栏 -->
      <el-card class="table-card">
          <div class="card-glow"></div>
          <template #header>
              <div class="table-header">
                  <el-button type="primary" @click="handleAdd">
                    <i class="icon-plus"></i> 新增
                  </el-button>
                  <el-button type="warning" :disabled="!selectedRows.length" @click="handleBatchSend">
                    <i class="icon-send"></i> 一键发送
                  </el-button>
                  <el-button type="success" @click="handleExport">
                    <i class="icon-export"></i> 导出
                  </el-button>
                  <el-button @click="toggleSelectAll">{{ isAllSelected ? '取消全选' : '全选' }}</el-button>
              </div>
          </template>
          <!-- 表格内容 -->
          <el-table v-loading="loading" ref="tableRef"
              :data="filteredTableData.slice((currentPage2 - 1) * pageSize2, currentPage2 * pageSize2)"
              style="width: 100%" border @selection-change="handleSelectionChange"
              :cell-style="{ whiteSpace: 'normal', wordWrap: 'break-word' }"
              :header-cell-style="{ whiteSpace: 'normal', wordWrap: 'break-word' }">
              <el-table-column type="selection" width="55" />
              <el-table-column label="ID" min-width="100">
                  <template #default="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column property="name" label="名称" min-width="120" />
              <el-table-column property="collection" label="收藏" min-width="100" />
              <el-table-column property="likes" label="点赞量" min-width="100" />
              <el-table-column property="volume" label="转发量" min-width="100" />
              <el-table-column label="链接" min-width="150">
                  <template #default="scope">
                      <a :href="scope.row.link" target="_blank" class="link-style">{{ scope.row.link ? '查看链接' : '无' }}</a>
                  </template>
              </el-table-column>
              <el-table-column property="time" label="抓取时间" min-width="160" />
              <el-table-column property="cv" label="播放量" min-width="100" />
              <el-table-column property="img" label="图片" min-width="100">
                  <template #default="{ row }">
                      <el-image :src="row.img" :preview-src-list="[row.img]" fit="cover"
                          style="width: 50px; height: 50px" />
                  </template>
              </el-table-column>
              <el-table-column label="操作" min-width="220">
                  <template #default="scope">
                      <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                      <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                      <el-button type="warning" size="small" @click="handleSend(scope.row)">发送</el-button>
                  </template>
              </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
              <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
                  :page-sizes="[10, 20, 50, 100]" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
      </el-card>

      <!-- 统计卡片 -->
      <el-card style="margin-top: 20px">
          <div class="card-glow"></div>
          <el-row :gutter="20">
              <el-col :span="12">
                  <div class="chart-container">
                      <div class="chart-header">
                          <span>数据趋势分析</span>
                          <div class="data-pulse"></div>
                      </div>
                      <div ref="trendChart" style="height: 350px"></div>
                  </div>
              </el-col>
              <el-col :span="12">
                  <div class="chart-container">
                      <div class="chart-header">
                          <span>数据分布占比</span>
                          <div class="data-pulse"></div>
                      </div>
                      <div ref="pieChart" style="height: 350px"></div>
                  </div>
              </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
              <el-col :span="24">
                  <div class="chart-container">
                      <div class="chart-header">
                          <span>综合数据对比</span>
                          <div class="data-pulse"></div>
                      </div>
                      <div ref="barChart" style="height: 350px"></div>
                  </div>
              </el-col>
          </el-row>
      </el-card>
      </div>

      <!-- 装饰性网格线条 -->
      <div class="grid-overlay"></div>

      <!-- 科幻风格发布进度弹窗 -->
      <div 
        class="publish-progress-popup" 
        v-show="isProgressPopupShow"
      >
        <div class="popup-content">
          <!-- 科幻风格关闭按钮 -->
          <div 
            class="close-btn" 
            @click="isProgressPopupShow = false"
          >
            <span class="close-icon">✕</span>
          </div>

          <!-- 标题区域带科幻扫描效果 -->
          <div class="status-header">
            <div class="scan-line"></div>
            <div class="status-title">SYSTEM PUBLISHING</div>
            <div class="status-desc">{{ progressStatusDesc }}</div>
          </div>

          <!-- 进度条容器带网格背景 -->
          <div class="progress-container">
            <div class="grid-bg"></div>
            <div class="progress-frame">
              <!-- 进度条带霓虹效果 -->
              <div 
                class="progress-bar" 
                :style="{ width: progress + '%' }"
                :class="{ pulse: progress % 10 === 0 && progress < 100, complete: progress === 100 }"
              >
                <div class="neon-glow"></div>
                <div class="data-stream"></div>
              </div>
              <!-- 进度数字带数字跳动效果 -->
              <div class="progress-text">{{ progress }}%</div>
            </div>
          </div>

          <!-- 错误提示带警告霓虹 -->
          <div class="error-tip" v-show="hasPublishError">
            <div class="error-icon">⚠</div>
            <span>TRANSMISSION FAILED: {{ publishErrorMsg }}</span>
            <el-button 
              type="text" 
              class="retry-btn" 
              @click="handleRetryPublish"
            >RETRY TRANSMISSION</el-button>
          </div>

          <!-- 装饰性科幻元素 -->
          <div class="corner-decoration top-left"></div>
          <div class="corner-decoration top-right"></div>
          <div class="corner-decoration bottom-left"></div>
          <div class="corner-decoration bottom-right"></div>
        </div>
      </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTransition } from '@vueuse/core'
import * as echarts from 'echarts'
import axios from 'axios'
import request from '@/utils/request'
import { uploadToKuaishouAPI } from '@/api/video/kuaishou'
import { uploadToDouyinAPI } from '@/api/video/douyin'
import { uploadToXiaohongshuAPI } from '@/api/image/xiaohongshu'
import { mockApi } from './crawler.js'

// ========== 基础数据与状态 ==========
const filteredTableData = ref([])
const previewData = ref([])
const searchForm = ref({
  name: '',
  timeRange: [],
  platform: 'all'
})
const loading = ref(false)
const selectedRows = ref([])
const currentPage2 = ref(1)
const tableRef = ref(null)
const pageSize2 = ref(5)
const totalCount = ref(0)
const isAllSelected = ref(false)

// ========== 发布进度弹窗状态 ==========
const isProgressPopupShow = ref(false)    // 弹窗显示状态
const progress = ref(0)                  // 进度值(0-100)
const progressStatusDesc = ref('')       // 进度描述文本
const hasPublishError = ref(false)       // 是否发布失败
const publishErrorMsg = ref('')          // 失败信息
const currentPublishRow = ref(null)      // 当前发布的行数据
const currentPublishPlatform = ref('')   // 当前发布的平台

// ========== 数据加载与表格逻辑 ==========
const loadPreviewData = async () => {
  try {
    const data = await mockApi.getPreviewData()
    previewData.value = data.data
    updateCharts(data.data)
  } catch (error) {
    ElMessage.error('加载预览数据失败')
  }
}

const getList = async () => {
  loading.value = true
  try {
    let res;
    if (searchForm.value.platform === 'douyin') {
      res = await axios.get('/douyin-api/api/v1/admin/douyin/videos', {
        params: { page: currentPage2.value, limit: pageSize2.value }
      })
    } else if (searchForm.value.platform === 'xiaohongshu') {
      try {
        res = await axios.get('/xiaohongshu-api/api/v1/admin/xiaohongshu/videos', {
          params: { page: currentPage2.value, limit: pageSize2.value }
        })
      } catch (error) {
        if (error.message.includes('ERR_CONNECTION_REFUSED')) {
          throw new Error('无法连接到小红书API服务，请检查服务是否运行在 http://192.168.0.125:3006')
        } else throw error
      }
    } else {
      res = await request.get('/kuaishouhao/videos', {
        params: { page: currentPage2.value, limit: pageSize2.value }
      })
    }

    const responseData = searchForm.value.platform === 'douyin' || searchForm.value.platform === 'xiaohongshu' 
      ? res.data 
      : res;

    if (responseData.code === 0) {
      const processedList = responseData.data.list.map(item => ({
        ...item,
        name: item.video_desc || item.title || item.note_title || '未命名',
        collection: item.collection || 0,
        likes: item.digg_count || item.likes || item.heart_count || 0,
        volume: item.share_count || item.volume || item.share_count || 0,
        link: item.video_url || item.link || item.note_url || '',
        time: item.crawl_time || item.time || item.create_time || '',
        cv: item.play_count || item.cv || item.view_count || 0,
        img: item.cover_url || item.img || item.cover_image || '',
        video_url: (item.video_url || item.link || item.note_url || '').replace(/`/g, ''),
        cover_url: (item.cover_url || item.img || item.cover_image || '').replace(/`/g, ''),
        summary: item.summary || item.note_content || '',
        tags: item.tags || item.note_tags || ''
      }))
      filteredTableData.value = processedList
      totalCount.value = responseData.data.total
    } else {
      filteredTableData.value = []
      totalCount.value = 0
      ElMessage.error('获取数据失败: ' + (responseData.message || '未知错误'))
    }
  } catch (error) {
    filteredTableData.value = []
    totalCount.value = 0
    ElMessage.error('获取数据失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 搜索与重置
const handleSearch = () => {
  currentPage2.value = 1
  getList()
}
const resetSearch = () => {
  searchForm.value = { name: '', timeRange: [], platform: 'all' }
  handleSearch()
}

// 表格选择与分页
const handleSelectionChange = (rows) => {
  selectedRows.value = rows
  isAllSelected.value = rows.length > 0 && rows.length === filteredTableData.value.length
}
const toggleSelectAll = () => {
  isAllSelected.value ? tableRef.value.clearSelection() : tableRef.value.toggleAllSelection()
}
const handleSizeChange = (val) => {
  pageSize2.value = val
  currentPage2.value = 1
  getList()
}
const handleCurrentChange = (val) => {
  currentPage2.value = val
}

// 编辑/删除/导出
const handleAdd = () => ElMessage.info('新增功能待实现')
const handleEdit = (id) => ElMessage.info(`编辑 ID: ${id}`)
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确认删除该记录吗？', '提示', { type: 'warning' })
    await request.delete(`/users/${id}`)
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') ElMessage.error('删除失败')
  }
}
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '提示', { type: 'warning' })
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') ElMessage.error('删除失败')
  }
}
const handleExport = () => ElMessage.success('导出成功')

// ========== 发布流程优化 ==========
// 显示平台选择弹窗
const handleSend = async (rowData) => {
  currentPublishRow.value = rowData  // 保存当前发布数据
  try {
    const result = await new Promise((resolve) => {
      ElMessageBox({
        title: '发布选择',
        message: `
          <div style="text-align: center;">
            <p>请选择发布平台</p>
            <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
              <button id="btn-kuaishou" class="el-button el-button--primary el-button--medium">发布到快手</button>
              <button id="btn-douyin" class="el-button el-button--primary el-button--medium">发布到抖音</button>
              <button id="btn-xiaohongshu" class="el-button el-button--primary el-button--medium">发布到小红书</button>
            </div>
          </div>
        `,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false
      })

      setTimeout(() => {
        document.getElementById('btn-kuaishou')?.addEventListener('click', () => {
          ElMessageBox.close()
          resolve('kuaishou')
        })
        document.getElementById('btn-douyin')?.addEventListener('click', () => {
          ElMessageBox.close()
          resolve('douyin')
        })
        document.getElementById('btn-xiaohongshu')?.addEventListener('click', () => {
          ElMessageBox.close()
          resolve('xiaohongshu')
        })
      }, 0)
    })

    // 记录选择的平台并显示进度弹窗
    currentPublishPlatform.value = result
    startPublishProgress()
  } catch (error) {
    if (error !== 'cancel') ElMessage.error('发布取消: ' + (error.message || ''))
  }
}

// 开始发布进度动画
const startPublishProgress = () => {
  // 重置进度状态
  progress.value = 0
  hasPublishError.value = false
  publishErrorMsg.value = ''
  isProgressPopupShow.value = true
  
  // 启动进度更新
  const progressInterval = setInterval(() => {
    if (progress.value >= 100) {
      clearInterval(progressInterval)
      // 进度完成后执行实际发布
      setTimeout(() => {
        publishToPlatform(currentPublishRow.value, currentPublishPlatform.value)
          .catch(err => {
            hasPublishError.value = true
            publishErrorMsg.value = err.message || '未知错误'
          })
      }, 500)
      return
    }

    // 更新进度与描述
    progress.value += 2
    if (progress.value < 30) {
      progressStatusDesc.value = '准备资源...'
    } else if (progress.value < 70) {
      progressStatusDesc.value = '正在发布到' + getPlatformName(currentPublishPlatform.value) + '...'
    } else if (progress.value < 95) {
      progressStatusDesc.value = '校验数据完整性...'
    } else {
      progressStatusDesc.value = '即将完成发布...'
    }
  }, 200)
}

// 重试发布
const handleRetryPublish = () => {
  startPublishProgress()
}

// 实际发布逻辑
const publishToPlatform = async (data, platform) => {
  try {
    // 数据验证
    if (!data || !data.video_url || !data.cover_url) {
      throw new Error('缺少必要的发布数据（视频URL或封面URL）')
    }

    // 视频URL验证
    const validateVideoUrl = (url) => {
      try { new URL(url); return true } 
      catch (e) { return false }
    }
    if (!validateVideoUrl(data.video_url)) {
      throw new Error('视频URL格式无效，请检查URL是否正确')
    }

    // 封面URL验证
    const userId = localStorage.getItem('user_id') || 'default_user'
    let coverUrl = data.cover_url
    const validateCoverUrl = async (url) => {
      return new Promise(resolve => {
        const img = new Image()
        img.src = url
        img.onload = () => resolve(true)
        img.onerror = () => resolve(false)
      })
    }
    let isValid = await validateCoverUrl(coverUrl)
    
    // 封面无效时重试
    let retryCount = 0
    while (!isValid && retryCount < 3) {
      const randomId = Math.floor(Math.random() * 1000)
      coverUrl = `https://picsum.photos/id/${randomId}/640/360`
      isValid = await validateCoverUrl(coverUrl)
      retryCount++
    }

    // 平台发布请求
    let result
    if (platform === 'douyin') {
      const douyinData = {
        command: 'postVideo',
        platform: 'douyin',
        params: {
          title: data.name || '未命名视频',
          video: data.video_url,
          cover: coverUrl,
          talk: data.tags ? data.tags.split(',').map(tag => tag.trim()) : [],
          summary: data.summary || '默认描述',
          post_id: `post_${Date.now()}`,
          user_id: userId,
          timestamp: new Date().getTime()
        }
      }
      result = await uploadToDouyinAPI(douyinData)
      ElMessage.success('发布成功')
    } else if (platform === 'kuaishou') {
      // 修改快手发布逻辑，与AIlist.vue中的uploadToKuaishou函数保持一致
      const kuaishouData = {
        command: 'publish',
        platform: 'kuaishouhao',
        params: {
          title: data.name || '未命名视频',
          video: data.video_url,
          cover: coverUrl,
          summary: data.summary || '默认描述',
          tags: data.tags ? data.tags.split(',').map(tag => tag.trim()) : [],
          user_id: userId,
          timestamp: new Date().getTime()
        }
      }
      result = await uploadToKuaishouAPI(kuaishouData)
      ElMessage.success('发布成功')
    } else if (platform === 'xiaohongshu') {
      // 修改小红书发布逻辑，与AIlist.vue中的uploadToXiaohongshu函数保持一致
      // 验证标题
      if (!data.name || data.name.trim() === '') {
        throw new Error('标题不能为空')
      }
      
      const xhsData = {
        command: 'publish',
        platform: 'xiaohongshu',
        params: {
          title: data.name || '未命名视频',
          video: data.video_url,
          cover: coverUrl,
          summary: data.summary || '默认描述',
          tags: data.tags ? data.tags.split(',').map(tag => `#${tag.trim()}#`) : [],
          user_id: userId,
          timestamp: new Date().getTime()
        }
      }
      result = await uploadToXiaohongshuAPI(xhsData)
      ElMessage.success('发布成功')
    }

    // 发布成功后关闭弹窗
    setTimeout(() => {
      isProgressPopupShow.value = false
    }, 1000)
  } catch (error) {
      console.error('发布失败:', error)
      ElMessage.error('发布失败')
      throw new Error(error.message || '发布请求失败')
  }
}

// 批量发送
const handleBatchSend = async () => {
  try {
    await ElMessageBox.confirm(`确认发送选中的 ${selectedRows.value.length} 条记录吗？`, '提示', { type: 'warning' })
    ElMessage.success('发布成功')
  } catch (error) {
    if (error !== 'cancel') ElMessage.error('发布失败')
  }
}

// 平台名称转换
const getPlatformName = (platform) => {
  switch (platform) {
    case 'douyin': return '抖音'
    case 'kuaishou': return '快手'
    case 'xiaohongshu': return '小红书'
    default: return '未知平台'
  }
}

// ========== 图表初始化 ==========
const trendChart = ref(null)
const pieChart = ref(null)
const barChart = ref(null)

const updateCharts = (data) => {
  // 趋势图
  const trendChartInstance = echarts.init(trendChart.value)
  trendChartInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', backgroundColor: 'rgba(10, 25, 47, 0.9)', borderColor: '#64ffda' },
    legend: { data: ['粉丝数', '获赞数'], textStyle: { color: '#ccd6f6' }, top: 30, left: 'center' },
    grid: { left: '5%', right: '5%', bottom: '15%', top: '20%', containLabel: true },
    xAxis: {
      type: 'category',
      data: data.map(item => item.nickname || `Item ${item.id}`),
      axisLine: { lineStyle: { color: 'rgba(100, 255, 218, 0.3)' } },
      axisLabel: { color: '#ccd6f6', rotate: 45 }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: 'rgba(100, 255, 218, 0.3)' } },
      axisLabel: { color: '#ccd6f6' }
    },
    series: [
      {
        name: '粉丝数',
        type: 'line',
        data: data.map(item => parseInt((item.followers || '0').replace('w', '')) * 10000),
        lineStyle: { color: '#64ffda' },
        itemStyle: { color: '#64ffda' },
        areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(100, 255, 218, 0.3)' },
          { offset: 1, color: 'rgba(100, 255, 218, 0)' }
        ]) }
      },
      {
        name: '获赞数',
        type: 'line',
        data: data.map(item => parseInt((item.likes || '0').replace('w', '')) * 10000),
        lineStyle: { color: '#9d4edd' },
        itemStyle: { color: '#9d4edd' },
        areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(157, 78, 221, 0.3)' },
          { offset: 1, color: 'rgba(157, 78, 221, 0)' }
        ]) }
      }
    ]
  })

  // 饼图
  const pieChartInstance = echarts.init(pieChart.value)
  pieChartInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'item', backgroundColor: 'rgba(10, 25, 47, 0.9)', borderColor: '#64ffda' },
    legend: { orient: 'vertical', left: 'left', textStyle: { color: '#ccd6f6' } },
    series: [{
      name: '数据占比',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['65%', '50%'],
      data: [
        { value: sumData('cv'), name: '播放量' },
        { value: sumData('likes'), name: '点赞量' },
        { value: sumData('volume'), name: '转发量' },
        { value: sumData('collection'), name: '收藏量' }
      ],
      colors: ['#64ffda', '#9d4edd', '#f72585', '#f7b731']
    }]
  })

  // 柱状图
  const barChartInstance = echarts.init(barChart.value)
  barChartInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', backgroundColor: 'rgba(10, 25, 47, 0.9)', borderColor: '#64ffda' },
    legend: { data: ['播放量', '点赞量', '转发量'], textStyle: { color: '#ccd6f6' }, top: 30, left: 'center' },
    grid: { left: '5%', right: '5%', bottom: '20%', top: '20%', containLabel: true },
    xAxis: {
      type: 'category',
      data: data.slice(0, 8).map(item => item.name || `Item ${item.id}`),
      axisLine: { lineStyle: { color: 'rgba(100, 255, 218, 0.3)' } },
      axisLabel: { color: '#ccd6f6', rotate: 45 }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: 'rgba(100, 255, 218, 0.3)' } },
      axisLabel: { color: '#ccd6f6' }
    },
    series: [
      { name: '播放量', type: 'bar', data: data.slice(0, 8).map(item => item.cv || 0), itemStyle: { color: '#64ffda' } },
      { name: '点赞量', type: 'bar', data: data.slice(0, 8).map(item => item.likes || 0), itemStyle: { color: '#9d4edd' } },
      { name: '转发量', type: 'bar', data: data.slice(0, 8).map(item => item.volume || 0), itemStyle: { color: '#f72585' } }
    ]
  })
}

// 数据总和计算
const sumData = (key) => {
  return filteredTableData.value.reduce((sum, item) => sum + (Number(item[key]) || 0), 0)
}

// ========== 初始化 ==========
onMounted(() => {
  getList()
  loadPreviewData()
  
  // 窗口大小监听
  window.addEventListener('resize', () => {
    if (trendChart.value) echarts.init(trendChart.value).resize()
    if (pieChart.value) echarts.init(pieChart.value).resize()
    if (barChart.value) echarts.init(barChart.value).resize()
  })
  window.dispatchEvent(new Event('resize'))
})
</script>

<style lang="scss" scoped>
// 核心科技风格变量
$neon-blue: #64ffda;
$neon-purple: #9d4edd;
$neon-pink: #f72585;
$neon-yellow: #f7b731;
$dark-bg: #050d18;
$darker-bg: #0a192f;
$grid-color: rgba(100, 255, 218, 0.08);
$glow-blue: 0 0 15px #64ffda, 0 0 30px #64ffda, 0 0 50px rgba(100, 255, 218, 0.8);
$tech-font: 'Orbitron', 'Rajdhani', 'Consolas', monospace;

// 基础容器样式
.container {
  padding: 20px;
  min-height: 100vh;
  background: 
    linear-gradient(45deg, $dark-bg, $darker-bg 50%, #112240 100%),
    radial-gradient(circle at 20% 50%, rgba(100, 255, 218, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(157, 78, 221, 0.1) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
  z-index: 0;
  
  // 扫描线效果
  .scanline {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.8), transparent);
    z-index: 10;
    animation: scan 6s linear infinite;
    pointer-events: none;
  }
  
  // 网格覆盖层
  .grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(to right, $grid-color 1px, transparent 1px),
      linear-gradient(to bottom, $grid-color 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
    animation: grid-pulse 8s infinite alternate;
  }
}

// 卡片发光效果
.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(45deg, $neon-blue, $neon-purple, $neon-pink);
  filter: blur(30px);
  opacity: 0.2;
  z-index: -1;
  animation: glow-pulse 4s infinite alternate;
}

// 搜索卡片样式
.search-card {
  margin-bottom: 20px;
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 35, 68, 0.9) 100%);
  backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(100, 255, 218, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(100, 255, 218, 0.5);
    transform: translateY(-2px);
  }

  .el-card__body {
    padding: 20px;

    .el-form {
      font-family: $tech-font;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .el-form-item {
        margin-bottom: 0;

        .el-form-item__label {
          color: #ccd6f6;
          font-weight: 500;
          text-shadow: 0 0 5px rgba(100,255,218,0.4);
        }

        .el-input, .el-date-picker {
          border: 1px solid rgba(100, 255, 218, 0.3);
          border-radius: 4px;
          background-color: rgba(10, 25, 47, 0.8);
          color: #ccd6f6;
          transition: all 0.3s ease;
          box-shadow: 0 0 10px rgba(0,0,0,0.3) inset;

          &:hover, &:focus-within {
            border-color: $neon-blue;
            box-shadow: $glow-blue, 0 0 10px rgba(0,0,0,0.3) inset;
          }

          input {
            background-color: transparent !important;
            color: #ccd6f6 !important;
            font-family: $tech-font;
            
            &::placeholder {
              color: #566684 !important;
              font-style: italic;
              opacity: 0.6;
            }
          }
        }

        .el-button {
          border: 1px solid rgba(100, 255, 218, 0.5);
          border-radius: 4px;
          background: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.05) 100%);
          color: #ccd6f6;
          font-family: $tech-font;
          transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
          position: relative;
          overflow: hidden;
          
          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.2), transparent);
            transition: all 0.5s ease;
          }

          &:hover {
            border-color: $neon-blue;
            box-shadow: $glow-blue;
            color: $neon-blue;
            
            &:before {
              left: 100%;
            }
          }

          &.el-button--primary {
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.2) 0%, rgba(100, 255, 218, 0.1) 100%);
            color: $neon-blue;
          }
        }
      }
    }
  }
}

// 表格卡片样式
.table-card {
  margin-bottom: 20px;
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 35, 68, 0.9) 100%);
  backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(100, 255, 218, 0.1);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: rgba(100, 255, 218, 0.5);
  }

  .el-card__header {
    background-color: rgba(10, 25, 47, 0.8);
    border-bottom: 1px solid rgba(100, 255, 218, 0.2);
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }

  .table-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: $tech-font;

    .el-button {
      border: 1px solid rgba(100, 255, 218, 0.5);
      border-radius: 4px;
      background: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.05) 100%);
      color: #ccd6f6;
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.2), transparent);
        transition: all 0.5s ease;
      }

      &:hover {
        border-color: $neon-blue;
        box-shadow: $glow-blue;
        color: $neon-blue;
        
        &:before {
          left: 100%;
        }
      }

      &.el-button--primary {
        background: linear-gradient(135deg, rgba(100, 255, 218, 0.2) 0%, rgba(100, 255, 218, 0.1) 100%);
        color: $neon-blue;
      }

      &.el-button--warning {
        border-color: rgba(247, 183, 49, 0.5);
        color: $neon-yellow;
        
        &:hover {
          border-color: $neon-yellow;
          box-shadow: 0 0 10px rgba(247, 183, 49, 0.5), 0 0 20px rgba(247, 183, 49, 0.3);
        }
      }

      &.el-button--danger {
        border-color: rgba(237, 100, 166, 0.5);
        color: $neon-pink;
        
        &:hover {
          border-color: $neon-pink;
          box-shadow: 0 0 10px rgba(237, 100, 166, 0.5), 0 0 20px rgba(237, 100, 166, 0.3);
        }
      }
    }
  }

  .el-card__body {
    padding: 20px;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(to right, $grid-color 1px, transparent 1px),
        linear-gradient(to bottom, $grid-color 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.5;
      z-index: -1;
    }

    .el-table {
      border: 1px solid rgba(100, 255, 218, 0.3);
      background: rgba(10, 25, 47, 0.6);
      color: #ccd6f6;
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
      border-radius: 4px;
      overflow: hidden;

      .el-table__header-wrapper th {
        background: linear-gradient(90deg, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7));
        color: $neon-blue;
        border-bottom: 1px solid rgba(100, 255, 218, 0.5);
        text-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
        font-family: $tech-font;
        position: relative;
        padding: 12px 0;
        
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 10%;
          height: 80%;
          width: 1px;
          background: linear-gradient(to bottom, transparent, rgba(100, 255, 218, 0.3), transparent);
        }
      }

      .el-table__body-wrapper td {
        border-bottom: 1px dashed rgba(100, 255, 218, 0.15);
        color: #ccd6f6;
        transition: all 0.3s ease;
        position: relative;
        padding: 12px 0;
        
        &:hover {
          background: rgba(100, 255, 218, 0.08);
          
          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background: $neon-blue;
            box-shadow: $glow-blue;
          }
        }
      }

      .el-table__row--selected > td {
        background: rgba(100, 255, 218, 0.1) !important;
        border-bottom: 1px solid rgba(100, 255, 218, 0.3);
      
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 3px;
          background: $neon-blue;
          box-shadow: $glow-blue;
        }
      }

      .el-image {
        border: 1px solid rgba(100, 255, 218, 0.3);
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        overflow: hidden;
        
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, rgba(100, 255, 218, 0.1) 0%, transparent 50%);
          z-index: 1;
          pointer-events: none;
        }

        &:hover {
          transform: scale(1.1) rotate(2deg);
          box-shadow: $glow-blue, 0 0 20px rgba(0,0,0,0.3);
        }
      }
    }
  }

  .pagination-container {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 20px;

    .el-pagination {
      color: #ccd6f6;
      text-shadow: 0 0 5px rgba(100,255,218,0.2);

      .el-pagination__total {
        color: #8892b0;
        font-family: $tech-font;
      }

      button,  .el-pagination__item {
        background-color: rgba(10, 25, 47, 0.8);
        border: 1px solid rgba(100, 255, 218, 0.3);
        color: #ccd6f6;
        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        font-family: $tech-font;

        &:hover {
          border-color: $neon-blue;
          color: $neon-blue;
          box-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
        }
      }

      .el-pagination__item.active {
        background-color: rgba(100, 255, 218, 0.2);
        border-color: $neon-blue;
        color: $neon-blue;
        box-shadow: 0 0 8px rgba(100, 255, 218, 0.5);
      }
    }
  }
}

// 图表容器样式
.chart-container {
  position: relative;
  height: 100%;
  
  .chart-header {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    
    span {
      color: $neon-blue;
      font-family: $tech-font;
      text-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
      font-weight: bold;
    }
    
    .data-pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: $neon-pink;
      box-shadow: 0 0 10px rgba(247, 37, 133, 0.8);
      animation: pulse 2s infinite;
    }
  }
}

// 最后一个卡片样式
.el-card:last-child {
  margin-top: 20px;
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 35, 68, 0.9) 100%);
  backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(100, 255, 218, 0.1);
  position: relative;
  z-index: 2;

  .el-card__body {
    padding: 20px;

    .el-row {
      .el-col {
        text-align: center;
        position: relative;
        margin-bottom: 20px;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: 
            linear-gradient(to right, $grid-color 1px, transparent 1px),
            linear-gradient(to bottom, $grid-color 1px, transparent 1px);
          background-size: 40px 40px;
          opacity: 0.3;
          z-index: 0;
        }

        div[ref] {
          position: relative;
          z-index: 1;
          border: 1px solid rgba(100, 255, 218, 0.3);
          border-radius: 8px;
          background: rgba(10, 25, 47, 0.5);
          overflow: hidden;
          transition: all 0.5s ease;
          
          &:hover {
            box-shadow: 0 0 30px rgba(100, 255, 218, 0.2);
            border-color: rgba(100, 255, 218, 0.5);
          }
        }
      }
    }
  }
}

// 表格操作按钮样式
.el-button.size-small {
  padding: 4px 10px;
  margin-right: 5px;
  font-size: 12px;
  font-family: $tech-font;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: all 0.3s ease;
  }
  
  &:hover:before {
    left: 100%;
  }

  &.el-button--primary {
    background: rgba(100, 255, 218, 0.1);
    color: $neon-blue;
    border-color: $neon-blue;
  }

  &.el-button--danger {
    background: rgba(237, 100, 166, 0.1);
    color: $neon-pink;
    border-color: $neon-pink;
  }

  &.el-button--warning {
    background: rgba(247, 183, 49, 0.1);
    color: $neon-yellow;
    border-color: $neon-yellow;
  }
}

// 链接样式
.link-style {
  color: $neon-blue;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  font-family: $tech-font;
  
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: $neon-blue;
    transition: width 0.3s ease;
    box-shadow: $glow-blue;
  }
  
  &:hover {
    color: $neon-blue;
    text-shadow: $glow-blue;
    
    &:after {
      width: 100%;
    }
  }
}

// 加载动画样式
.el-loading-mask {
  background-color: rgba(10, 25, 47, 0.9);
  backdrop-filter: blur(8px);
}

.el-loading-spinner {
  .path {
    stroke: $neon-blue;
    stroke-width: 3px;
    filter: drop-shadow(0 0 5px rgba(100, 255, 218, 0.8));
    stroke-dasharray: 100;
    animation: dash 2s linear infinite;
  }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 25, 47, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(100, 255, 218, 0.3), rgba(157, 78, 221, 0.3));
  border-radius: 4px;
  border: 1px solid rgba(10, 25, 47, 0.8);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(100, 255, 218, 0.5), rgba(157, 78, 221, 0.5));
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
  transform: scale(1.1);
}

// 科幻风格发布进度弹窗样式
.publish-progress-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(10, 25, 47, 0.95), rgba(0, 5, 15, 0.98));
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;

  // 背景网格动效
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: 
      linear-gradient(to right, rgba(100, 255, 218, 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 15s linear infinite;
    pointer-events: none;
  }

  .popup-content {
    width: 480px;
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(15, 35, 65, 0.95));
    border: 1px solid rgba(100, 255, 218, 0.4);
    border-radius: 8px;
    padding: 30px;
    position: relative;
    box-shadow: 0 0 40px rgba(100, 255, 218, 0.15), 
                0 0 10px rgba(100, 255, 218, 0.2) inset;
    overflow: hidden;

    // 扫描线效果
    &:before {
      content: '';
      position: absolute;
      top: -50%;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom, 
        transparent, 
        rgba(100, 255, 218, 0.1), 
        transparent
      );
      transform: rotate(-30deg);
      animation: scanLine 6s linear infinite;
      pointer-events: none;
    }

    .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      
      .close-icon {
        color: rgba(100, 255, 218, 0.7);
        font-size: 18px;
        transition: all 0.3s;
        text-shadow: 0 0 5px rgba(100, 255, 218, 0.5);
      }
      
      &:hover .close-icon {
        color: $neon-blue;
        transform: scale(1.2) rotate(90deg);
        text-shadow: 0 0 10px rgba(100, 255, 218, 0.8);
      }
    }

    .status-header {
      position: relative;
      margin-bottom: 30px;
      text-align: center;
      
      .scan-line {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: $neon-blue;
        box-shadow: 0 0 10px rgba(100, 255, 218, 0.8);
        animation: scanHorizontal 3s ease-in-out infinite;
        z-index: 1;
      }
      
      .status-title {
        color: $neon-blue;
        font-size: 22px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 10px;
        text-shadow: 0 0 8px rgba(100, 255, 218, 0.6);
        font-family: $tech-font;
        position: relative;
        z-index: 2;
      }
      
      .status-desc {
        color: #8892b0;
        font-size: 14px;
        letter-spacing: 0.5px;
        font-family: $tech-font;
        text-shadow: 0 0 3px rgba(100, 255, 218, 0.2);
      }
    }

    .progress-container {
      width: 100%;
      height: 40px;
      margin-bottom: 25px;
      position: relative;
      
      .grid-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
          linear-gradient(to right, rgba(100, 255, 218, 0.1) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
        background-size: 15px 15px;
        border-radius: 4px;
        z-index: 1;
      }
      
      .progress-frame {
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(100, 255, 218, 0.3);
        border-radius: 4px;
        overflow: hidden;
        background: rgba(10, 25, 47, 0.6);
        z-index: 2;
      }
      
      .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, rgba(100, 255, 218, 0.2), rgba(100, 255, 218, 0.6));
        transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.4) inset;
        
        &.pulse {
          animation: pulse 0.5s ease-in-out;
        }
        
        &.complete {
          background: linear-gradient(90deg, rgba(72, 219, 251, 0.3), rgba(72, 219, 251, 0.8));
          box-shadow: 0 0 20px rgba(72, 219, 251, 0.6) inset;
        }
        
        .neon-glow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
          );
          animation: flowLight 2s infinite linear;
        }
        
        .data-stream {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: 
            linear-gradient(
              to bottom,
              rgba(100, 255, 218, 0.1) 50%,
              transparent 50%
            );
          background-size: 100% 4px;
          animation: dataFlow 0.5s linear infinite;
        }
      }
      
      .progress-text {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: $neon-blue;
        font-size: 14px;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(100, 255, 218, 0.8);
        font-family: $tech-font;
        z-index: 3;
      }
    }

    .error-tip {
      color: rgba(247, 37, 133, 0.8);
      font-size: 14px;
      margin-top: 15px;
      text-align: center;
      padding: 15px;
      border: 1px solid rgba(247, 37, 133, 0.3);
      border-radius: 4px;
      background: rgba(247, 37, 133, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: $tech-font;
      
      .error-icon {
        color: $neon-pink;
        text-shadow: 0 0 5px rgba(247, 37, 133, 0.6);
      }
      
      .retry-btn {
        color: $neon-blue;
        margin-left: 8px;
        padding: 0;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: all 0.3s;
        
        &:hover {
          color: $neon-blue;
          text-shadow: 0 0 8px rgba(100, 255, 218, 0.8);
        }
      }
    }

    // 角落装饰元素
    .corner-decoration {
      position: absolute;
      width: 15px;
      height: 15px;
      border-color: rgba(100, 255, 218, 0.4);
      border-style: solid;
      border-width: 1px 0 0 1px;
      pointer-events: none;
      
      &.top-left {
        top: 15px;
        left: 15px;
      }
      
      &.top-right {
        top: 15px;
        right: 15px;
        border-width: 1px 1px 0 0;
      }
      
      &.bottom-left {
        bottom: 15px;
        left: 15px;
        border-width: 0 0 1px 1px;
      }
      
      &.bottom-right {
        bottom: 15px;
        right: 15px;
        border-width: 0 1px 1px 0;
      }
    }
  }
}

.right{
  margin-right:50px;
}

// 图标样式
.icon-plus:before {
  content: '+';
  margin-right: 5px;
}

.icon-send:before {
  content: '→';
  margin-right: 5px;
}

.icon-export:before {
  content: '↓';
  margin-right: 5px;
}
</style>